{% extends 'base.html' %}

{% block title %}
All Tags · {{ super() }}
{% endblock title %}

{% block head_description %}
All tags used in the {{ SITENAME|striptags|e }} blog.
{% endblock head_description %}

{% block meta_tags_in_head %}
{{ super() }}
<meta property="og:title" content="All Tags · {{ SITENAME|striptags|e }}"/>
<meta name="twitter:title" content="All Tags · {{ SITENAME|striptags|e }}">
{% from '_includes/_defaults.html' import FEATURED_IMAGE, TAGS_URL with context %}
<meta property="og:url" content="{{ SITEURL }}/{{ TAGS_URL }}" />
<meta property="og:description" content="All tags used in the {{ SITENAME|striptags|e }} blog" />
<meta name="twitter:description" content="All tags used in the {{ SITENAME|striptags|e }} blog">
<meta property="og:site_name" content="{{ SITENAME|striptags|e }}" />
<meta property="og:article:author" content="{{ AUTHOR }}" />
{% if FEATURED_IMAGE %}
<meta property="og:image" content="{{ FEATURED_IMAGE }}" />
<meta name="twitter:image" content="{{ FEATURED_IMAGE }}" >
{% endif %}
{% endblock meta_tags_in_head %}

{% block feed_links %}
{{ super() }}
{% include '_includes/feeds_tags.html' %}
{% endblock feed_links %}

{% block content %}
{% from '_includes/_defaults.html' import TAGS_URL with context %}
<div class="row-fluid">
    <header class="page-header span10 offset2">
    <h1><a href="{{ SITEURL }}/{{ TAGS_URL }}">All Tags</a></h1>
    </header>
</div>
<div class="row-fluid">
    <div class="span8 offset2">
        <form class="form-search">
            <input type="text" class="input-medium search-query filterinput" placeholder="Find a tag">
        </form>
        <ul class="list-of-tags">
            {% for tag, articles in tags|sort %}
            <li>
            {% set num = articles|count %}
            <a href="#{{ tag.slug }}-ref">{{ tag }}<span class="superscript">{{ num }}</span></a>
            </li>
            {% endfor %}
        </ul>
    </div>
</div>

<div class="row-fluid">
    <div class="span8 offset2">
        {% for tag, articles in tags|sort %}
        <h2 id="{{ tag.slug }}-ref" class="tag-title">{{ tag }}</h2>
        <ul class="list-articles-under-tag-category">
            {% for article in articles|sort(reverse = true, attribute = 'date') %}
            <li itemscope>
                <a href="{{ SITEURL }}/{{ article.url }}">
                    {{ article.title }}
                    {% if article.subtitle %}
                    <small class="subtitle">
                        {{ article.subtitle }}
                    </small>
                    {% endif %}
                </a>
                <time itemprop="dateCreated" datetime="{{ article.date.isoformat() }}">
                    {{ article.locale_date }}
                </time>
            </li>
            {% endfor %}
        </ul>

        {% endfor %}
    </div>
</div>

{% endblock content %}

{% block script %}
{{ super() }}

<script>
    (function ($) {
        // custom css expression for a case-insensitive contains()
        jQuery.expr[':'].Contains = function(a,i,m){
            return (a.textContent || a.innerText || "").toUpperCase().indexOf(m[3].toUpperCase())>=0;
        };

        function listFilter() {

            $('.filterinput')
            .change( function () {
                var filter = $(this).val();
                if(filter) {
                    // this finds all links in a list that contain the input,
                    // and hide the ones not containing the input while showing the ones that do
                    $('.list-of-tags').find("a:not(:Contains(" + filter + "))").parent().hide();
                    $('.list-of-tags').find("a:Contains(" + filter + ")").parent().show();
                    } else {
                    $('.list-of-tags').find("li").show();
                }
                return false;
            })
            .keyup( function () {
                // fire the above change event after every letter
                $(this).change();
            });
        }

        //ondomready
        $(function () {
            listFilter($());
        });
    }(jQuery));

</script>


{% endblock script %}
